import HeaderList from '../components/HeaderList'
import { useDispatch, useSelector } from 'react-redux'
import { getInterviewTitleAsync } from "../redux/interviewSlice"
import { useEffect, useState } from 'react';
import { IStore } from '../redux/typings';
import { getType } from '../redux/typeList';
import { Tree, FloatButton } from 'antd'
import styles from "../css/Interview.module.scss";
import { getInterviewById } from "../api/interview"
import { IInterviewInfo } from "../typings"

function Interviews() {
    const dispatch = useDispatch();
    const { interviewTitleList } = useSelector((state: IStore) => state.interview);
    const { typeList } = useSelector((state: IStore) => state.type)
    const [treeData, setTreeData] = useState<any>([])
    // 用于存储id对应的面试题内容
    const [interviewInfo, setInterviewInfo] = useState<IInterviewInfo>();

    const clickHandle = async (id: string) => {
        const { data } = await getInterviewById(id);
        setInterviewInfo(data.data)
    }

    useEffect(() => {
        // 每个分类下面的面试题标题
        if (!interviewTitleList.length) {
            // 初始化仓库里面的面试题标题
            dispatch((getInterviewTitleAsync as any)())
        }
        // 分类名
        if (!typeList.length) {
            dispatch((getType as any)())
        }
        // 组装数组
        if (interviewTitleList.length && typeList.length) {
            const arr = [];
            // 添加分类标题
            for (let i = 0; i < typeList.length; i++) {
                arr.push({
                    title: (<div style={{ fontWeight: "200" }}>
                        {typeList[i].typeName}
                    </div>),
                    key: i
                })
            }
            // 每一个分类下面的面试题标题
            for (let i = 0; i < interviewTitleList.length; i++) {
                const childArr = [];
                for (let j = 0; j < interviewTitleList[i].length; j++) {
                    childArr.push({
                        title: (<div style={{ fontWeight: "200" }} onClick={() => { clickHandle(interviewTitleList[i][j]._id) }}>{interviewTitleList[i][j].interviewTitle}</div>),
                        key: `${i}-${j}`
                    })
                }
                (arr[i] as any).children = childArr;
            }
            setTreeData(arr)
        }

    }, [typeList, interviewTitleList])

    let interviewRightSide = null;
    if (interviewInfo) {
        interviewRightSide = (
            <div className={styles.content}>
                <h1 className={styles.interviewRightTitle}>{interviewInfo?.interviewTitle}</h1>
                <div className={styles.contentContainer}>
                    <div dangerouslySetInnerHTML={{ __html: (interviewInfo?.interviewContent as string) }}></div>
                </div>
            </div>

        )
    } else {
        interviewRightSide = (
            <div style={{ textAlign: "center", fontSize: "40px", fontWeight: 100, marginTop: "150px" }}>
                请在左侧选择面试题
            </div>
        )
    }


    return (
        <div className={styles.container}>
            <HeaderList title="面试题大全" />
            <div className={styles.interviewContainer}>
                <div className={styles.leftSide}>
                    <Tree
                        treeData={treeData}
                    />
                </div>
                <div className={styles.rightSide}>
                    {interviewRightSide}
                </div>
            </div>
            <FloatButton.BackTop />
        </div>
    )
}

export default Interviews



